{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --success-color: #4bb543;
        --danger-color: #ff3333;
        --warning-color: #ffc107;
        --light-color: #f8f9ff;
        --dark-color: #212529;
        --border-radius: 0.75rem;
        --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .task-form-container {
        max-width: 900px;
        margin: 2rem auto;
    }

    .form-card {
        background: #fff;
        border-radius: var(--border-radius);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border: none;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .form-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    .form-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 1.5rem 2rem;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .form-header h2 {
        margin: 0;
        font-weight: 700;
        font-size: 1.75rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .form-header i {
        font-size: 1.5rem;
    }

    .form-body {
        padding: 2rem;
    }

    .form-section {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .section-title {
        color: var(--dark-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-title i {
        color: var(--primary-color);
        font-size: 1.1em;
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-control, .form-select {
        height: calc(2.5rem + 2px);
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        background-color: #fff;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
    }

    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    .btn {
        font-weight: 500;
        padding: 0.7rem 1.75rem;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-transform: none;
        letter-spacing: 0.3px;
    }

    .btn i {
        font-size: 1.1em;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
        position: relative;
        overflow: hidden;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .btn-outline-secondary {
        border: 1px solid #dee2e6;
    }

    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    .priority-badge {
        display: inline-block;
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.375rem;
    }

    .priority-high {
        background-color: #fff5f5;
        color: #dc3545;
    }

    .priority-medium {
        background-color: #fff8e6;
        color: #fd7e14;
    }

    .priority-low {
        background-color: #f0f9ff;
        color: #0d6efd;
    }

    @media (max-width: 768px) {
        .form-body {
            padding: 1.5rem;
        }
        
        .form-header h2 {
            font-size: 1.5rem;
        }
    }

    .btn-outline-secondary {
        border: 1px solid #dee2e6;
    }

    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    /* Custom checkbox styling */
    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* Date picker customization */
    .flatpickr-input {
        background-color: #fff !important;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .form-card {
            padding: 1.5rem;
        }
        
        .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }
        
        .btn-group .btn {
            margin-right: 0.5rem;
            margin-bottom: 0;
        }
        
        .btn-group .btn:last-child {
            margin-right: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header mb-4">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">
                    <i class="fas {% if form.instance.pk %}fa-edit{% else %}fa-plus-circle{% endif %} me-2"></i>
                    {% if form.instance.pk %}Update Task{% else %}Create New Task{% endif %}
                </h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white">Home</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'tasks:task_list' %}" class="text-white">Tasks</a></li>
                        <li class="breadcrumb-item active text-white-50" aria-current="page">
                            {% if form.instance.pk %}Update{% else %}New{% endif %}
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="task-form-container">
    <div class="form-card">
        <div class="form-header">
            <h2>
                <i class="fas fa-tasks"></i>
                {% if form.instance.pk %}Edit Task{% else %}Create New Task{% endif %}
            </h2>
            <a href="{% url 'tasks:task-list' %}" class="btn btn-light btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Tasks
            </a>
        </div>
        
        <div class="form-body">
            <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                {% csrf_token %}
                
                {% if form.non_field_errors %}
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        {% for error in form.non_field_errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}

                <!-- Basic Information Section -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle"></i> Task Information
                    </h3>
                    
                    <div class="row g-3">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="{{ form.title.id_for_label }}" class="form-label">
                                    <i class="fas fa-heading me-1"></i> {{ form.title.label }}
                                </label>
                                {{ form.title }}
                                {% if form.title.help_text %}
                                    <small class="form-text text-muted">{{ form.title.help_text }}</small>
                                {% endif %}
                                {% if form.title.errors %}
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i> {{ form.title.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="{{ form.priority.id_for_label }}" class="form-label">
                                    <i class="fas fa-flag me-1"></i> Priority
                                </label>
                                {{ form.priority }}
                                {% if form.priority.errors %}
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i> {{ form.priority.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mt-4">
                        <label for="{{ form.description.id_for_label }}" class="form-label">
                            <i class="fas fa-align-left me-1"></i> Description
                        </label>
                        {{ form.description }}
                        <small class="form-text text-muted">
                            <i class="fas fa-lightbulb me-1"></i> Provide a clear and detailed description of the task.
                        </small>
                        {% if form.description.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i> {{ form.description.errors|join:", " }}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Assignment & Due Date Section -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-user-clock"></i> Assignment & Timeline
                    </h3>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.assigned_to.id_for_label }}" class="form-label">
                                    <i class="fas fa-user-tag me-1"></i> Assign To
                                </label>
                                {{ form.assigned_to }}
                                {% if form.assigned_to.errors %}
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i> {{ form.assigned_to.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.due_date.id_for_label }}" class="form-label">
                                    <i class="far fa-calendar-alt me-1"></i> Due Date
                                </label>
                                <div class="input-group">
                                    {{ form.due_date }}
                                    <span class="input-group-text">
                                        <i class="far fa-calendar"></i>
                                    </span>
                                </div>
                                {% if form.due_date.errors %}
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i> {{ form.due_date.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    <i class="fas fa-tasks me-1"></i> Status
                                </label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i> {{ form.status.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="d-flex justify-content-between pt-3">
                    <button type="reset" class="btn btn-outline-secondary">
                        <i class="fas fa-undo me-1"></i> Reset
                    </button>
                    <div class="btn-group">
                        <a href="{% url 'tasks:task-list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> {% if form.instance.pk %}Update{% else %}Create{% endif %} Task
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Flatpickr for date/time picker -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Initialize flatpickr for datetime fields
    document.addEventListener('DOMContentLoaded', function() {
        // Date/Time Picker
        const dateFields = document.querySelectorAll('input[type="datetime-local"]');
        if (dateFields.length > 0) {
            flatpickr(dateFields, {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
                time_24hr: true
            });
        }
    });
</script>
{% endblock %}